<template>
	<w-layout showNavbar navTitle="商品详情" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view style="position: relative;" class="public-card-10 fc px-50 py-50 mt-50">
					<swiper v-if="state.info.detail_image && state.info.detail_image.length" style="height: 590rpx;" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000">
						<swiper-item v-for="(item,index) in state.info.detail_image" :key="index">
							<cut-corner :arrow="2" clipSize="50rpx" width="100%" height="100%">
								<image style="width: 100%;height: 590rpx;" :src="item" mode="widthFix"></image>
							</cut-corner>
						</swiper-item>
					</swiper>
					
					<view class="mt-40">
						{{state.info.title}}
					</view>
					
					<view class="fr-ac mt-30">
						<view class="op-50">
							已售{{state.info.sale_num}}件 | 剩{{state.info.stock}}件
						</view>
						<view class="ml-auto color">
							¥{{state.info.price}}
						</view>
					</view>
				</view>
				
				<view class="mt-60">
					<view class="color fs-36">
						商品详情
					</view>
					<view v-if="state.info.content" class="mt-30" style="line-height: 1.6;">
						<view class="" v-html="state.info.content">
							
						</view>
					</view>
				</view>
				
				<up-gap height="100"></up-gap>
				<view @click="openPaymentPopup(1)" class="fr-ac px-40 w-100 gap-30" style="position: fixed;bottom: 0rpx;left: 0%;">
					<view @click="" class="public-btn-3 transition py-25 t-c mb-60 flex-1">
						<view class="text-color-b op-90 fs-32">
							立即购买
						</view>
					</view>
				</view>
				
				<payment
					:show="PaymentPopup.show" 
					type="shangcheng"
					:goods_id="PaymentPopup.goods_id"
					:goods_num="PaymentPopup.goods_num"
					@callback="callback"
					@close="closePaymentPopup"
				></payment>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		shop_goods_detail
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
		if(options.id){
			state.goods_id = options.id
			get_shop_goods_detail()
		}
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		goods_id: '',
		info: {},
		
		list:[1,1],
		page:1,
		limit:15,
		last_limit:15,
		
		keyword:'',
	})
	function initData(){
		state.list = []
		state.page = 1
		state.last_limit = 15
	}

	
	function replaceBox(){
		uni.navigateTo({
			url:`/pages/yifan_shang/replace`
		})
	}
	
	async function get_shop_goods_detail(){
		const res = await shop_goods_detail({
			goods_id: state.goods_id
		})
		state.info = res
	}
	
	const PaymentPopup = reactive({
		show: false,
		goods_id: '',
		goods_num: '',
	})
	async function openPaymentPopup(num){
		PaymentPopup.goods_id = state.goods_id
		PaymentPopup.goods_num = num
		PaymentPopup.show = true
	}
	function closePaymentPopup(num){
		PaymentPopup.show = false
	}
	// 支付回调
	async function callback(order_num){
		closePaymentPopup()
		if(!order_num){
			uni.$u.toast('支付成功！')
			setTimeout(()=>{
				uni.redirectTo({
					url: '/pages/order/list?type=1'
				})
			},1500)
		}
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 0 30rpx;
		
	}
	
</style>